﻿@{
    ViewBag.Title = "Overview over all authors";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="PresentationBox">
    <!-- ng-app="publicModule" ng-controller="AllTitlesController as titleCtrl" -->
    <div>

        <table class="DataPresentationtable" id="allAuthors">
            <tr>
                <td><center><img src="/Content/images/loading.gif" />loading data...</center></td>
            </tr>
        </table>
    </div>
</div>

<script type="text/javascript">

    var dataSet = [];
    $(document).ready(function () {
        $.getJSON("/api/author", function (data) {
            $.each(data, function (key, val) {
                console.log(val);

                var author = [];

                author.Name = "<a href='/Author/Get/" + val.Author.Aid + "'>" + val.Author.Name + "</a>";
                author.Titles = val.Titles.length;
                

                dataSet.push(author);
            });

            $('#allAuthors').DataTable({
                "bFilter": false,
                "data": dataSet,
                "columns": [
                    { "data": "Name", "title": "Name" },
                    { "data": "Titles", "title": "Titles" }
                ]
            });

            //remove ugly DataTable css
            $('#allAuthors').removeClass("dataTable");
        });
    });
</script>
